<template>
    <!-- 动态渲染所有组件 -->
    <component
      v-for="(comp, key) in loadedComponents"
      :key="key"
      :is="comp"
      v-show="currentComponent === key"
    />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { defineAsyncComponent } from 'vue';
import { constantRoutes } from '@/utils/menus';

// 定义当前显示的组件名称
const currentComponent = ref('配置中心'); // 默认显示首页

// 缓存加载完成的组件
const loadedComponents = reactive({});

// 预加载所有组件
onMounted(async () => {
  await Promise.all(
    constantRoutes.map(async (route) => {
      const componentName = route.meta.name; // 使用 meta.name 作为组件的唯一标识
      loadedComponents[componentName] = defineAsyncComponent(route.component);
    })
  );
  console.log('所有组件已加载完成');
});

// 提供一个方法来切换组件
const setCurrentComponent = (componentName) => {
  console.log(componentName);
  currentComponent.value = componentName; // 更新当前组件名称
};

// 暴露方法以便父组件调用
defineExpose({
  setCurrentComponent,
});
</script>

<style>
html,
body,
#app {
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.el-container {
  height: 100%;
}
</style>